import React from 'react';
import ReactDOM from 'react-dom'

class Scroll extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Scroll';
        this.state = {
            scrollY: -1
        }
    }
    fixTop(first) {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || window.scrollY
        if (this.state.scrollY < 0) {
            var dom = ReactDOM.findDOMNode(this)
            var top = dom.getBoundingClientRect().top
            if (top <= this.props.top) {
                this.state.scrollY = scrollTop - this.props.top + top
                if (this.props.auto) {
                    dom.style.position = "fixed"
                    dom.style.top = this.props.top + "px"
                }
                if (this.props.onChange) {
                    this.props.onChange(true)
                }
                if (this.props.once) {
                    this.unbind()
                }
                this.setState({})
            }
        } else if (scrollTop < this.state.scrollY) {
            var dom = ReactDOM.findDOMNode(this)
            this.state.scrollY = -1
            if (this.props.auto) {
                dom.style.position = "absolute"
                dom.style.top = this.state.top
            }
            if (this.props.onChange) {
                this.props.onChange(false)
            }
            this.setState({})
        }
    }
    fixBottom(first) {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || window.scrollY
        if (this.state.scrollY < 0) {
            var dom = ReactDOM.findDOMNode(this)
            var bottom = window.innerHeight - dom.getBoundingClientRect().bottom
            if (bottom <= this.props.bottom) {
                this.state.scrollY = scrollTop + this.props.bottom - bottom
                if (this.props.auto) {
                    dom.style.position = "fixed"
                    dom.style.bottom = this.props.bottom + "px"
                }
                if (this.props.onChange) {
                    this.props.onChange(true)
                }
                if (this.props.once) {
                    this.unbind()
                }
                this.setState({})
            }
        } else if (scrollTop > this.state.scrollY) {
            var dom = ReactDOM.findDOMNode(this)
            this.state.scrollY = -1
            if (this.props.auto) {
                dom.style.position = "absolute"
                dom.style.top = this.state.top
            }
            if (this.props.onChange) {
                this.props.onChange(false)
            }
            this.setState({})
        }
    }
    // import ReactDOM from 'react-dom'
    componentDidMount() {
        var dom = ReactDOM.findDOMNode(this)
        if (this.props.auto)
            dom.style.position = "absolute"
        this.state.top = dom.style.top
        if (this.props.bottom !== false) {
            this.scroll = this.fixBottom.bind(this, false)
        } else {
            this.scroll = this.fixTop.bind(this, false)
        }
        this.scroll(true)
        window.addEventListener('scroll', this.scroll)
    }
    unbind() {
        window.removeEventListener('scroll', this.scroll)
    }
    componentWillUnmount() {
        this.unbind()
    }
    render() {
        var elem = this.props.children
        if (this.state.scrollY < 0) return elem
        return React.cloneElement(elem, { className: elem.props.className + " " + this.props.fixClass })
    }
}

Scroll.defaultProps = {
    top: 0,
    bottom: false,
    fixClass: "fix"
}

export default Scroll
